<template>
    <div style="border: 1px solid green;">
        <div v-for="item in list" :key="item.id">
            <!-- 包括开始在内的流程 -->
            <div style="width: 100px; height: 60px;line-height: 60px;margin: 5px auto;border-radius: 10px;"
                :style="{ 'background': item.color }" @click="DirectClick(item)">{{
                    item.name }}</div>
            <!-- 箭头 -->
            <div v-if="item.id >= 1 && item.id != list.length" class="jian"></div>
        </div>
        <!-- 右边抽屉 -->
        <el-drawer :title="directioname" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
            <el-select v-model="phone1" clearable multiple collapse-tags placeholder="请选择">
                <el-option v-for="item in phonest" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
            </el-select>
        </el-drawer>
    </div>
</template>
<script>
import store from '@/store';

export default {
    data() {
        return {
            drawer: false,
            direction: 'rtl',
            directioname: '',
            phonest: [],
            phone1:[],
            list: [
                {
                    id: 1,
                    name: '开始',
                    desc: '开始描述',
                    color: '#ff9933',
                    img: ''
                },
                {
                    id: 2,
                    name: '审批人一',
                    desc: '流程一描述',
                    color: '#eb5555',
                    img: ''
                },
                {
                    id: 3,
                    name: '审批人二',
                    desc: '流程二描述',
                    color: '#a26cd6',
                    img: ''
                },
                {
                    id: 4,
                    name: '结束',
                    desc: '结束描述',
                    color: '#067bef',
                    img: ''
                }

            ]
        }
    },
    methods: {
        // 流程demo打开抽屉
        DirectClick(item) {
            if (item.name != '开始' && item.name != '结束')
                this.drawer = true;
            this.directioname = item.name
            this.phonest = store.state.list;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => { });
        }
    },
}
</script>
<style lang="scss" scoped>
.jian {
    width: 6px;
    height: 80px;
    background-color: #d5dce2;
    margin: 20px auto;
    border: 50%;
    position: relative;
}

.jian::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -6px;
    left: -3px;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 12px solid #d5dce2;
}
</style>